import React from 'react';
import PropTypes from 'prop-types';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import { Row, Col, Button, message, Popconfirm, Modal as AntdModal } from 'antd';
import List from './List';
import Filter from './Filter';
import Modal from './Modal';

const SysUser = ({ location, app, dispatch, sysUser, loading, roles, products }) => {
	const { list, pagination, currentItem, modalVisible, modalType, isMotion, selectedRowKeys } = sysUser;
	const modalProps = {
		item: modalType === 'create' ? {
			ext: {},
			isEnable: 1,
			roleIds: []
		} : currentItem,
		visible: modalVisible,
		maskClosable: false,
		confirmLoading: loading.effects['sysUser/update'],
		title: `${modalType === 'create' ? '添加' : '更新'}`,
		wrapClassName: 'vertical-center-modal',
		onOk(data) {
			dispatch({
				type: `sysUser/${modalType}`,
				payload: data,
			});
		},
		onCancel() {
			dispatch({
				type: 'sysUser/hideModal',
			});
		},
		roles,
    products,
		app
	};

	const handleFields = (fields) => {
		const { createTime } = fields;
		if (createTime.length) {
			pagination.startTime = createTime[0].format('YYYY-MM-DD HH:mm:ss');
			pagination.endTime = createTime[1].format('YYYY-MM-DD HH:mm:ss');
		}

		// 将处理完成后数组参数删除
		for (const item in fields) {
			if ({}.hasOwnProperty.call(fields, item)) {
				if (fields[item] instanceof Array) {
					fields[item] = undefined;
				}
			}
		}

		return fields;
	};

	const listProps = {
		dataSource: list,
		loading: loading.effects['sysUser/query'],
		pagination,
		location,
		isMotion,
		onChange(page) {
			// 分页条件，根据查询的需求而定
			page.size = page.pageSize;
			page.searchCount = true;
			page.openSort = true;
			page.isAsc = false;
			page.showTotal = null;
			page.orderByField = 'ctime';

			const { query, pathname } = location;

			dispatch(routerRedux.push({
				pathname,
				query: {
					...query,
					page: page.current,
					...page,
				},
			}));
		},
		onDeleteItem(id) {
			dispatch({
				type: 'sysUser/delete',
				payload: id,
			});
		},
		onEditItem(item) {
			dispatch({
				type: 'sysUser/showModal',
				payload: {
					modalType: 'update',
					currentItem: item,
				},
			});
			dispatch({
				type: 'sysUser/detail',
				payload: item.id
			});
		},
		rowSelection: {
			selectedRowKeys,
			onChange: (keys) => {
				dispatch({
					type: 'sysUser/updateState',
					payload: {
						selectedRowKeys: keys,
					},
				});
			},
		},
	};

	const onDel = () => {
		if (!selectedRowKeys.length) {
			message.warn('请选择要删除掉的系统用户');
			return;
		}
		AntdModal.confirm({
			title: '删除系统用户',
			content: '你确定要删除选中的系统用户吗?',
			onOk() {
				dispatch({
					type: 'sysUser/multiDelete',
					ids: selectedRowKeys
				});
			},
		});
		// dispatch({
		// 	type: 'sysUser/multiDelete',
		// 	ids: selectedRowKeys
		// });
	};

	const filterProps = {
		isMotion,
		onDel,
		filter: {
			...location.query,
		},
		onFilterChange(value) {
			value = handleFields(value);
			pagination.searchCount = true;
			pagination.openSort = true;
			pagination.isAsc = false;
			pagination.showTotal = null;
			pagination.orderByField = 'ctime';
			dispatch(routerRedux.push({
				pathname: location.pathname,
				query: {
					page: 1,
					...pagination,
					condition: JSON.stringify(value),
				},
			}));
		},
		onAdd() {
			dispatch({
				type: 'sysUser/showModal',
				payload: {
					modalType: 'create',
				},
			});
		},
		switchIsMotion() {
			dispatch({ type: 'sysUser/switchIsMotion' });
		},
	};

	// const handleDeleteItems = () => {
	// };

	return (
		<div className="content-inner">

			<Filter {...filterProps} />
			{/* {
				selectedRowKeys.length > 0 &&
				<Row style={{ marginBottom: 24, textAlign: 'right', fontSize: 13 }}>
					<Col>
						{`Selected ${selectedRowKeys.length} items `}
						<Popconfirm title={'确定删除选中的项吗?'} placement="left" onConfirm={handleDeleteItems}>
							<Button type="primary" style={{ marginLeft: 8 }}>Remove</Button>
						</Popconfirm>
					</Col>
				</Row>
			} */}
			<List {...listProps} />
			{modalVisible && <Modal {...modalProps} />}
		</div>
	);
};

SysUser.propTypes = {
	sysUser: PropTypes.object,
	location: PropTypes.object,
	dispatch: PropTypes.func,
	loading: PropTypes.object,
};

// export default connect(({ sysUser, sysRole, loading, app }) => ({ sysUser, loading, roles: sysRole.list, app }))(SysUser);
export default connect((state) => {
  const { sysUser, sysRole, loading, app, productList } = state
  console.log(state.productList)
  return { sysUser, loading, roles: sysRole.list, app, products: productList.list }
})(SysUser)
